<template>
  <!-- 根据 visible 控制显示，动态绑定类型和样式 -->
  <div v-if="visible" class="notify" :class="`notify--${type}`" :style="{
    backgroundColor: customColor || '',
    top: position === 'top' ? '0' : 'auto',
    bottom: position === 'bottom' ? '0' : 'auto'
  }">
    <div class="notify__content">{{ message }}</div>
  </div>
</template>

<script>
export default {
  name: 'Notify',
  props: {
    visible: Boolean, // 是否显示（由父级/插件控制）
    type: { type: String, default: 'primary' }, // 通知类型：primary/success/danger/warning
    message: { type: String, default: '' }, // 提示内容
    customColor: String, // 自定义背景色
    duration: { type: Number, default: 3000 }, // 自动关闭时长（毫秒）
    position: { type: String, default: 'top' } // 显示位置：top/bottom
  },
  data() {
    return {
      timer: null // 定时器标识，用于自动关闭
    };
  },
  mounted() {
    console.log(1);
  },
  watch: {
    visible(val) {
      if (val) {
        this.startTimer(); // 显示时启动自动关闭定时器
      } else {
        this.clearTimer(); // 隐藏时清除定时器
      }
    }
  },
  methods: {
    startTimer() {
      this.clearTimer(); // 先清除旧定时器，防止重复
      this.timer = setTimeout(() => {
        this.$emit('update:visible', false); // 触发关闭
      }, this.duration);
    },
    clearTimer() {
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
    }
  },
  beforeDestroy() {
    this.clearTimer(); // 组件销毁前清除定时器，避免内存泄漏
  }
};
</script>

<style scoped lang="scss">
/* 优化后的通知样式 */
.notify {
  position: fixed;
  left: 0;
  right: 0;
  padding: 16px 24px;
  text-align: center;
  color: #fff;
  z-index: 2000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);

  /* 默认顶部定位 */
  top: 0;
  transform: translateY(-120%);
  opacity: 0;
}

/* 底部定位配置 */
.notify[style*="bottom"] {
  top: auto;
  bottom: 0;
  transform: translateY(120%);
}

/* 显示动画 */
.notify.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 类型配色 */
.notify--primary {
  background: #409eff;
}

.notify--success {
  background: #67c23a;
}

.notify--danger {
  background: #f56c6c;
}

.notify--warning {
  background: #e6a23c;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .notify {
    width: 90%;
    left: 5%;
    border-radius: 8px;
  }
}
</style>